/**
 * Created by bdbs on 2017/6/20.
 */
import React, { Component } from 'react';
import DropZone from 'react-dropzone';
import style from '../style.scss';
import readFile from '../util/readFile';
import parseSubtitle from '../util/parseSubtitle';
import TimerMixin from 'react-timer-mixin';
import SubTitle from './SubTitle';

const encodeTypes = [
  'GBK',
  'utf8',
  'ucs2',
  'GB2312',
  'ascii',
  'binary',
  'base64',
  'hex',
];

class Media extends Component {
  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      time: 0,
      duration: 0,
    };
  }

  componentWillUnMount() {
    clearInterval(this.timmer);
  }

  handlePlay() {
    const media = this.refs.media;
    console.log('handlePlay', [this.refs.media]);
    this.setState({
      duration: media.duration,
    });
    media.play();
  }

  handlePause() {
    const media = this.refs.media;
    media.pause();
  }

  handleSetVolume() {
    const media = this.refs.media;
    media.volume = 0.5;
  }

  handleMute() {
    const media = this.refs.media;
    media.muted = !media.muted;
  }

  handleMediaSeekTo(toTime) {
    console.log('handleMediaSeekTo');
    const { media } = this.refs;
    if (media) media.currentTime = toTime;
  }

  startTick() {
    clearInterval(this.timmer);
    const { media } = this.refs;
    this.timmer = setInterval(() => {
      const { currentTime } = media;
      const time = Math.floor(currentTime) * 10 + ((Math.floor(currentTime * 10) % 10) > 5 ? 10 : 5);
      this.props.onTick(time);
    }, 500);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.seekTo !== nextProps.seekTo) {
      this.handleMediaSeekTo(nextProps.seekTo);
    };
  }

  stopTick() {
    clearInterval(this.timmer);
  }

  handleMediaClick() {
    const media = this.refs.media;
    console.log('sdf', [media.paused]);
    if (media.paused) {
      media.play();
    } else {
      media.pause();
    }
  }

  renderMedia() {
    const { mediaFile } = this.props;
    if (!mediaFile) return;
    const isAudio = mediaFile.type.search('audio') === 0;
    let media;
    if (isAudio) {
      media = (
        <audio
          ref="media"
          onPlaying={this.startTick.bind(this)}
          onEnded={this.stopTick.bind(this)}
          onPause={this.stopTick.bind(this)}
          width="100"
          height="100"
          src={`file://${mediaFile.path}`}
        />
      );
    } else {
      media = (
        <video
          ref="media"
          onPlaying={this.startTick.bind(this)}
          onEnded={this.stopTick.bind(this)}
          onPause={this.stopTick.bind(this)}
          width="100%"
          onClick={this.handleMediaClick.bind(this)}
          src={`file://${mediaFile.path}`}
        />
      );
    }
    return media;
  }

  render() {
    return (
      <div>
        <div>{ this.props.seekTo }</div>
        <div>
          <ul className={ style.actionBar }>
            <li><a onClick={this.handlePlay.bind(this)}>Play</a></li>
            <li><a onClick={this.handlePause.bind(this)}>Pause</a></li>
            <li><a onClick={this.handleMediaSeekTo.bind(this)}>Seek</a></li>
            <li><a onClick={this.handleSetVolume.bind(this)}>volume</a></li>
            <li><a onClick={this.handleMute.bind(this)}>mute</a></li>
            <li>{ Math.round(this.state.time / this.state.duration * 10) }%</li>
          </ul>
        </div>
        { this.renderMedia() }
      </div>
    );
  }
}

Media.defaultProps = {
  onTick(time) {
    console.log('onTick', time);
  },
  seekTo: 0,
};

export default Media;
